<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatMallLinkComponent/>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-wrap">
        <div class="search-box">
          <input class="inp-search" :placeholder="defaultSearchKeywords" v-model="searchKeywords"/>
          <a class="btn-search" href="javascript:;" @click="search">搜索</a>
        </div>
        <div class="search-suggest-box">
          <ul>
            <li>热门搜索：</li>
            <li v-for="item in searchSuggestKeywords" :key="item">
              <a :href="'/mall/search?keywords=' + item" v-text="item"></a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 页面主体 -->
    <div class="main-container">
      <div class="main-wrap">
        <!-- 商品列表 -->
        <div style="background: #fff; border-radius: 5px;">
          <el-empty description="当前页面正在开发中……"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloatMallLinkComponent from '@/components/FloatMallLinkComponentView.vue';

export default {
  components: {
    FloatMallLinkComponent
  },
  data() {
    return {
      pageTitle: '',
      defaultSearchKeywords: '',
      searchKeywords: '',
      searchSuggestKeywords: []
    }
  },
  methods: {
    loadPageTitle() {
      this.pageTitle = '茶叶商城 - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '大红袍';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadSearchSuggestKeywords() {
      let searchSuggestKeywords = ['车载杯', '煮茶壶', '铁观音', '五宝茶', '小青柑', '苦荞茶'];
      this.searchSuggestKeywords = searchSuggestKeywords;
    },
    search() {
      let keywords = this.searchKeywords;
      if (!keywords) {
        keywords = this.defaultSearchKeywords;
      }
      this.$message({
        message: '您正在尝试搜索【' + keywords + '】，抱歉，此功能尚未实现……',
        type: 'warning'
      });
    }
  },
  mounted() {
    this.loadPageTitle();
    this.loadDefaultSearchKeywords();
    this.loadSearchSuggestKeywords();
  }
}
</script>

<style>
.float-link-container {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.search-container {
  height: 342px;
  background-image: url('../../../public/images/0_search_background.jpg');
}

.search-container .search-wrap {
  padding: 180px 0 0 0;
}

.search-container .search-box {
  width: 720px;
  height: 60px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}

.search-container .search-box .inp-search {
  width: 550px;
  height: 60px;
  padding: 0 90px 0 30px;
  opacity: 0.85;
  border: none;
  border-radius: 30px;
  outline: none;
  font-size: 16px;
  color: #666;
}

.search-container .search-box a.btn-search {
  display: inline-block;
  padding: 0 30px;
  width: 50px;
  height: 60px;
  line-height: 60px;
  position: absolute;
  right: 0;
  top: 0;
  background: #6A70E9;
  border-radius: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff;
}

.search-container .search-suggest-box {
  margin-top: 30px;
}

.search-container .search-suggest-box li {
  display: inline-block;
  color: #ededed;
  margin: 0 10px;
}

.search-container .search-suggest-box li a {
  color: #ededed;
}

.search-container .search-suggest-box li a:hover {
  color: #fff;
  text-decoration: underline;
}
</style>
